<template>
  <div class="dmquery">
    <div class="dmquery-body">
      <table>
        <tr>
          <td width="120px">
            <a-input title="按关键字查询" placeholder="关键字" v-model="queryParams.keywords" allow-clear />
          </td>
          <td width="160px">
            <!--引入：项目安全大类,单选 securityCategory.json 一级 【如果是树，使用a-tree-select】-->
             <a-select placeholder="项目安全大类"  style="width: 100%"
                           v-model="queryParams.securityCategory1">
                 <a-select-option value="0">请实际引入类型数据[测试]</a-select-option>
                </a-select>
          </td>
          <!--级联单选 securityCategory.json 二级-->
           <td width="160px">
             <!--引入：项目安全细类,级联单选 securityCategory.json 二级【如果是树，使用a-tree-select】-->
            <a-select placeholder="项目安全细类"  style="width: 100%"
                           v-model="queryParams.securityCategory2">
                 <a-select-option value="0">请实际引入类型数据[测试]</a-select-option>
                </a-select>
          </td>
          <td width="230px">
            <a-range-picker v-model="setupTimes"
                            title="按项目设立时间查询"
                            :placeholder="['项目设立起始日期','项目设立截止日期']"
                            :ranges="dateRanges"
                            :disabled-date="disabledFutureDates"
            />
          </td>
          <td>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import DataQueryUtils from '@/utils/DataQueryUtils.js'

export default {
  mixins: [DataQueryUtils],
  data() {
    return {
      queryParams: {
        keywords: '',//关键字
        securityCategory1: null,//项目安全大类
        securityCategory2: null,//项目安全细类
        setupTimes: null//项目设立时间
      },
      setupTimes: []
    }
  },
  watch: {
    setupTimes(dates) {
      if (dates.length == 2) {
        const from = dates[0].format('YYYY-MM-DD')
        const to = dates[1].format('YYYY-MM-DD')
        this.queryParams.setupTimes = [from, to]
      } else {
        this.queryParams.setupTimes = null
      }
    }
  },
}
</script>
